<template>
  <div class="echarts1" ref="echarts">
  </div>
</template>
<script>
import * as echarts from "echarts"

export default {
  name: 'echarts1',
  components: {},
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
    list() {
      this.drawEcharts();
    },
  },
  mounted() {
    var that = this;
    const viewElem = document.body;
    // 监听窗口变化,重绘echarts
    const resizeObserver = new ResizeObserver(() => {
      setTimeout(() => {
        that.drawEcharts();
      }, 300)
    });
    resizeObserver.observe(viewElem);
  },
  methods: {
    drawEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.echarts)
      const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
      var option = {
        legend: {
          icon: 'rect',
          top: '0%',
          left: 'center',
          itemWidth: 5,
          itemHeight: 5,
          itemGap: 20,
          textStyle: {
            color: 'rgba(179, 221, 222, 1)'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var tooltipText = params[0].axisValue + '<br/>'; // 这里添加x轴的值

            params.forEach(function (item) {
              if (item.seriesName === '温度') {
                tooltipText += item.seriesName + ': ' + item.value + '°C<br/>';
              } else if (item.seriesName === '湿度') {
                tooltipText += item.seriesName + ': ' + item.value + '%<br/>';
              }
            });

            return tooltipText;
          }
        },
        grid: {
          top: '40',
          left: '20',
          right: '20',
          bottom: '10',
          containLabel: true
        },
        xAxis: [
            {
          type: 'category',
          data: this.list.map(obj => obj.name),
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            },
          },
          axisPointer: {
            label: {
              // padding: [11, 5, 7],
              padding: [0, 0, 10, 0],
              // 这里的margin和axisLabel的margin要一致!
              margin: 15,
              // 移入时的字体大小
              fontSize: 12,
              backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#fff' // 0% 处的颜色
                }, {
                  // offset: 0.9,
                  offset: 0.86,
                  /*
0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                  */
                  color: '#fff' // 0% 处的颜色
                }, {
                  offset: 0.86,
                  color: '#33c0cd' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#33c0cd' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          boundaryGap: false
        }],
        yAxis: [
          // 温度y轴
          {
            name: '℃',
            type: 'value',
            axisTick: { show: false },
            axisLine: {
              show: false,
              lineStyle: { color: '#fff' }
            },
            axisLabel: {
              textStyle: { color: '#fff' }
            },
            splitLine: {
              show: true,
              lineStyle: { color: '#7cabe9' }
            }
          },
          // 湿度y轴
          {
            name: '%',
            type: 'value',
            position: 'right', // 使用右侧的y轴
            axisTick: { show: false },
            axisLine: {
              show: false,
              lineStyle: { color: '#fff' }
            },
            axisLabel: {
              textStyle: { color: '#fff' }
            },
            splitLine: {
              show: false // 不显示分隔线或调整为需要的样式
            }
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            data: this.list.map(obj => obj.value1),
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#9effff'
              },
                {
                  offset: 1,
                  color: '#9E87FF'
                }
              ]),
              shadowColor: 'rgba(158,135,255, 0.3)',
              shadowBlur: 10,
              shadowOffsetY: 20
            },
            itemStyle: {
              normal: {
                color: colorList[0],
                borderColor: colorList[0]
              }
            }
          },
          {
            name: '湿度',
            type: 'line',
            data: this.list.map(obj => obj.value2),
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 1,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                offset: 0,
                color: '#73DD39'
              },
                {
                  offset: 1,
                  color: '#73DDFF'
                }
              ]),
              shadowColor: 'rgba(115,221,255, 0.3)',
              shadowBlur: 10,
              shadowOffsetY: 20
            },
            itemStyle: {
              normal: {
                color: colorList[1],
                borderColor: colorList[1]
              }
            }
          }
        ]
      };


      var len = 0;
      setInterval(() => {
        if (len === this.list.map(obj => obj.name).length) {
          len = 0
        }
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 1,
          dataIndex: len,
        })
        len++;
      }, 2000)

      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
